<template>
  <section>
    <transition enter-active-class="animate__animated animate__fadeIn" mode="out-in">
      <section>
<ZyTableQueryForm :ruleForm="query.params" :rules="queryRule" @query="goPage(1)" @reset="goReset">
  <el-form-item prop="app">
    <el-input v-model="query.params.app" clearable @change="() => goPage(1)" placeholder="App 名称查询" />
  </el-form-item>

  <el-form-item prop="schema" style="width: 220px">
    <el-select
      v-model="query.params.schema"
      clearable
      placeholder="请选择协议"
      @change="() => goPage(1)"
      style="width: 100%"
    >
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label" />
    </el-select>
  </el-form-item>
</ZyTableQueryForm>

        <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%"
          :loading="loading.list"
          element-loading-text="加载中..."
          @sort-change="handleSortChange"
          @selection-change="handleSelectionChange"
          row-key="app"
          :expand-row-keys="expandedRowKeys"
        >

          <el-table-column type="selection" align="center" />
          <!-- 序号列 -->
          <el-table-column type="index" label="序号" width="60" align="center"/>
          <el-table-column prop="app" label="流id" align="center" width="120" show-overflow-tooltip />
          <el-table-column prop="schema" label="协议" align="center" width="100" show-overflow-tooltip />
          <el-table-column prop="readerCount" label="在线人数" align="center" width="100" show-overflow-tooltip />
          <el-table-column prop="bytesSpeed" label="速度 (B/s)" align="center" width="120" show-overflow-tooltip />
          <el-table-column prop="originUrl" label="源地址" align="left" width="300" show-overflow-tooltip />
          <el-table-column prop="stream" label="流名称" align="left" width="250" show-overflow-tooltip />
        <el-table-column label="网络信息" align="left" width="300">
          <template #default="{ row }">
            <div>local_ip：{{ row.originSock.local_ip }}</div>
            <div>local_port{{ row.originSock.local_port }}</div>
            <div>peer_ip：{{ row.originSock.peer_ip }}</div>
            <div>peer_port：{{ row.originSock.peer_port }}</div>
          </template>
        </el-table-column>

          <!-- <el-table-column label="媒体轨道" prop="tracks" align="left" width="150" /> -->
        </el-table>

        <ZyElPagination
          :current-page="query.pagination.current"
          :page-size="query.pagination.pageSize"
          :total="tempData.total"
          @size-change="sizeChange"
          @current-change="currentChange"
        />
      </section>
    </transition>
  </section>
</template>

<script>
import api from '@/api/axios.js'

export default {
  data() {
    return {
      options: [
        { value: '1', label: 'hls' },
        { value: '2', label: 'ts' },
        { value: '3', label: 'rtmp' },
        { value: '4', label: 'fmp4' },
        { value: '5', label: 'rtsp' }
      ],
      query: {
        params: {
          app: '',
          schema: '' // 👈 新增字段用于筛选协议
        },
        pagination: {
          current: 1,
          pageSize: 10
        }
      },
      queryRule: {},
      loading: {
        list: false,
        text: '加载中...'
      },
      tempData: {
        total: 0,
        showEdit: false,
        showView: false,
        dialogTitle: '编辑',
        updateData: {}
      },
      tableData: [],
      expandedRowKeys: []
    }
  },
  methods: {
    async getData() {
      this.loading.list = true
      try {
        const res = await api.post('/getMediaList')
        const data = res.data || []
        const { current, pageSize } = this.query.pagination
        const filtered = data.filter(item => {
          const matchApp = !this.query.params.app || (item.app && item.app.includes(this.query.params.app))
          const matchSchema = !this.query.params.schema || (item.schema && item.schema === this.query.params.schema)
          return matchApp && matchSchema
        })

        this.tempData.total = filtered.length
        this.tableData = filtered.slice((current - 1) * pageSize, current * pageSize)
        this.expandedRowKeys = []
      } catch (err) {
        console.error('获取数据失败', err)
      } finally {
        this.loading.list = false
      }
    },
    sizeChange(size) {
      this.query.pagination.pageSize = size
      this.goPage(1)
    },
    currentChange(page) {
      this.goPage(page)
    },
    goPage(page) {
      this.query.pagination.current = page
      this.getData()
    },
    goReset() {
      this.query.params.app = ''
      this.query.params.schema = ''
      this.goPage(1)
    },
    handleSortChange(e) {
      console.log('排序：', e)
    },
    handleSelectionChange(selection) {
      console.log('选中：', selection)
    },
    formatTime(timestamp) {
      if (!timestamp) return '-'
      const date = new Date(timestamp)
      const pad = n => String(n).padStart(2, '0')
      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ` +
        `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped lang="scss">
.hidden-header {
  display: none;
}
</style>
